import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import Caption from '~/components/text/caption'
import Link from '~/components/text/link'
import { Image } from '~/components/media'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Deploy Svelte with ZEIT Now',
  description: 'Create a Svelte app and deploy it live with ZEIT Now.',
  name: 'Svelte',
  type: 'app',
  published: '2019-10-30T12:00:00.860Z',
  authors: ['msweeneydev'],
  url: '/guides/deploying-svelte-with-zeit-now',
  example: 'svelte',
  demo: 'https://svelte.now-examples.now.sh',
  image:
    'https://og-image.now.sh/**Deploy%20Svelte%20Apps**%20%3Cbr%2F%3E%20with%20ZEIT%20Now.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDciIGhlaWdo%250D%250AdD0iMTI4IiB2aWV3Qm94PSIwIDAgMTA3IDEyOCI%2BPHRpdGxlPnN2ZWx0ZS1sb2dvPC90aXRsZT48%250D%250AcGF0aCBkPSJNOTQuMTU2NiwyMi44MTg5Yy0xMC40LTE0Ljg4NTEtMzAuOTQtMTkuMjk3MS00NS43%250D%250AOTE0LTkuODM0OEwyMi4yODI1LDI5LjYwNzhBMjkuOTIzNCwyOS45MjM0LDAsMCwwLDguNzYzOSw0%250D%250AOS42NTA2YTMxLjUxMzYsMzEuNTEzNiwwLDAsMCwzLjEwNzYsMjAuMjMxOEEzMC4wMDYxLDMwLjAw%250D%250ANjEsMCwwLDAsNy4zOTUzLDgxLjA2NTNhMzEuODg4NiwzMS44ODg2LDAsMCwwLDUuNDQ3MywyNC4x%250D%250AMTU3YzEwLjQwMjIsMTQuODg2NSwzMC45NDIzLDE5LjI5NjYsNDUuNzkxNCw5LjgzNDhMODQuNzE2%250D%250ANyw5OC4zOTIxQTI5LjkxNzcsMjkuOTE3NywwLDAsMCw5OC4yMzUzLDc4LjM0OTMsMzEuNTI2Mywz%250D%250AMS41MjYzLDAsMCwwLDk1LjEzLDU4LjExN2EzMCwzMCwwLDAsMCw0LjQ3NDMtMTEuMTgyNCwzMS44%250D%250AOCwzMS44OCwwLDAsMC01LjQ0NzMtMjQuMTE1NyIgc3R5bGU9ImZpbGw6I2ZmM2UwMCIvPjxwYXRo%250D%250AIGQ9Ik00NS44MTcxLDEwNi41ODE1QTIwLjcxODIsMjAuNzE4MiwwLDAsMSwyMy41OCw5OC4zMzg5%250D%250AYTE5LjE3MzksMTkuMTczOSwwLDAsMS0zLjI3NjYtMTQuNTAyNSwxOC4xODg2LDE4LjE4ODYsMCww%250D%250ALDEsLjYyMzMtMi40MzU3bC40OTEyLTEuNDk3OCwxLjMzNjMuOTgxNWEzMy42NDQzLDMzLjY0NDMs%250D%250AMCwwLDAsMTAuMjAzLDUuMDk3OGwuOTY5NC4yOTQxLS4wODkzLjk2NzVhNS44NDc0LDUuODQ3NCww%250D%250ALDAsMCwxLjA1MiwzLjg3ODEsNi4yMzg5LDYuMjM4OSwwLDAsMCw2LjY5NTIsMi40ODUsNS43NDQ5%250D%250ALDUuNzQ0OSwwLDAsMCwxLjYwMjEtLjcwNDFMNjkuMjcsNzYuMjgxYTUuNDMwNiw1LjQzMDYsMCww%250D%250ALDAsMi40NTA2LTMuNjMxLDUuNzk0OCw1Ljc5NDgsMCwwLDAtLjk4NzUtNC4zNzEyLDYuMjQzNiw2%250D%250ALjI0MzYsMCwwLDAtNi42OTc4LTIuNDg2NCw1Ljc0MjcsNS43NDI3LDAsMCwwLTEuNi43MDM2bC05%250D%250ALjk1MzIsNi4zNDQ5YTE5LjAzMjksMTkuMDMyOSwwLDAsMS01LjI5NjUsMi4zMjU5LDIwLjcxODEs%250D%250AMjAuNzE4MSwwLDAsMS0yMi4yMzY4LTguMjQyNywxOS4xNzI1LDE5LjE3MjUsMCwwLDEtMy4yNzY2%250D%250ALTE0LjUwMjQsMTcuOTg4NSwxNy45ODg1LDAsMCwxLDguMTMtMTIuMDUxM0w1NS44ODMzLDIzLjc0%250D%250ANzJhMTkuMDAzOCwxOS4wMDM4LDAsMCwxLDUuMy0yLjMyODdBMjAuNzE4MiwyMC43MTgyLDAsMCwx%250D%250ALDgzLjQyLDI5LjY2MTFhMTkuMTczOSwxOS4xNzM5LDAsMCwxLDMuMjc2NiwxNC41MDI1LDE4LjQs%250D%250AMTguNCwwLDAsMS0uNjIzMywyLjQzNTdsLS40OTEyLDEuNDk3OC0xLjMzNTYtLjk4YTMzLjYxNzUs%250D%250AMzMuNjE3NSwwLDAsMC0xMC4yMDM3LTUuMWwtLjk2OTQtLjI5NDIuMDg5My0uOTY3NWE1Ljg1ODgs%250D%250ANS44NTg4LDAsMCwwLTEuMDUyLTMuODc4LDYuMjM4OSw2LjIzODksMCwwLDAtNi42OTUyLTIuNDg1%250D%250ALDUuNzQ0OSw1Ljc0NDksMCwwLDAtMS42MDIxLjcwNDFMMzcuNzMsNTEuNzE5YTUuNDIxOCw1LjQy%250D%250AMTgsMCwwLDAtMi40NDg3LDMuNjMsNS43ODYyLDUuNzg2MiwwLDAsMCwuOTg1Niw0LjM3MTcsNi4y%250D%250ANDM3LDYuMjQzNywwLDAsMCw2LjY5NzgsMi40ODY0LDUuNzY1Miw1Ljc2NTIsMCwwLDAsMS42MDIt%250D%250ALjcwNDFsOS45NTE5LTYuMzQyNWExOC45NzgsMTguOTc4LDAsMCwxLDUuMjk1OS0yLjMyNzgsMjAu%250D%250ANzE4MSwyMC43MTgxLDAsMCwxLDIyLjIzNjgsOC4yNDI3LDE5LjE3MjUsMTkuMTcyNSwwLDAsMSwz%250D%250ALjI3NjYsMTQuNTAyNCwxNy45OTc3LDE3Ljk5NzcsMCwwLDEtOC4xMywxMi4wNTMyTDUxLjExNjcs%250D%250AMTA0LjI1MjhhMTkuMDAzOCwxOS4wMDM4LDAsMCwxLTUuMywyLjMyODciIHN0eWxlPSJmaWxsOiNm%250D%250AZmYiLz48L3N2Zz4%3D&widths=250&widths=300&heights=250&heights=300',
  editUrl: 'pages/guides/deploying-svelte-with-zeit-now.mdx',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

[Svelte](https://svelte.dev/) is a radically new approach to building user interfaces.

## Step 1: Set Up Your Svelte Project

Set up a Svelte app with [`npx`](https://www.npmjs.com/package/npx) and move into the project directory:

<Snippet dark text="npx degit sveltejs/template my-svelte-project && cd my-svelte-project" />
<Caption>Initializing a Svelte app with <Link href="https://www.npmjs.com/package/npx">npx</Link> and moving into the project directory.</Caption>

## Step 2: Deploying Your Svelte App with ZEIT Now

<DeploySection meta={meta} />

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
